<template>
  <Card :loading="loading" class="!md:mt-0 monitor-card" :canExpan="false">
    <div class="px-4">
      <!--      <CountTo prefix="订阅量" :startVal="1" :endVal="10000" class="text-2xl" color="grey" />-->
      <div class="px-4 font-light mb-10px flex justify-between">
        <span class="text-base">{{ title }}</span>
      </div>
      <span class="ml-4 text-4xl font-bold text-sl-slBlue">{{ value }}</span>
      <CloudTwoTone style="font-size: 40px" class="float-right" />
    </div>
  </Card>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { Card } from 'ant-design-vue';
import { CloudTwoTone } from '@ant-design/icons-vue';
import { getTenantSummery } from '/@/api/maintenance-center/resource-monitor/for-platform/resourceMonitor';

const props = defineProps({
  title: String,
  value: String,
  icon: String,
  color: String,
});
const title = ref(props.title);
const loading = ref(true);
const value = ref(props.value);
switch (title.value) {
  case '租户数':
    value.value = getTenantSummery().then((res) => {
      value.value = res.tenants;
      loading.value = !loading.value;
    });
    break;
  case '已订阅应用数':
    value.value = getTenantSummery().then((res) => {
      value.value = res.subscribedApps;
      loading.value = !loading.value;
    });
    break;
  case '命名空间数':
    value.value = getTenantSummery().then((res) => {
      value.value = res.databases;
      loading.value = !loading.value;
    });
    break;
  case '数据库数':
    value.value = getTenantSummery().then((res) => {
      value.value = res.namespaces;
      loading.value = !loading.value;
    });
    break;
  case '工作负载数':
    value.value = getTenantSummery().then((res) => {
      value.value = res.deployments;
      loading.value = !loading.value;
    });
    break;
  case '应用数':
    value.value = getTenantSummery().then((res) => {
      value.value = res.apps;
      loading.value = !loading.value;
    });
    break;
  case '服务数':
    value.value = getTenantSummery().then((res) => {
      value.value = res.services;
      loading.value = !loading.value;
    });
    break;
  case 'ECS数':
    value.value = getTenantSummery().then((res) => {
      value.value = res.ecs;
      loading.value = !loading.value;
    });
    break;
  case '用户总数':
    value.value = getTenantSummery().then((res) => {
      value.value = res.users;
      loading.value = !loading.value;
    });
    break;
  case '组织总数':
    value.value = getTenantSummery().then((res) => {
      value.value = res.orgCounts;
      loading.value = !loading.value;
    });
    break;
}
</script>

<style>
/*.breathe-div {*/
/*  width: 15px;*/
/*  height: 15px;*/
/*  border: 15px solid #e7e7e7;*/
/*  border-radius: 50%;*/
/*  text-align: center;*/
/*  cursor: pointer;*/
/*  margin: 10px auto;*/
/*  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);*/
/*  overflow: hidden;*/
/*  -webkit-animation-timing-function: ease-in-out;*/
/*  -webkit-animation-name: breathe;*/
/*  -webkit-animation-duration: 1500ms;*/
/*  -webkit-animation-iteration-count: infinite;*/
/*  -webkit-animation-direction: alternate;*/
/*}*/
</style>
<style lang="less">
.monitor-card {
  color: @label;
  height: 100px;
  .ant-card-body {
    padding: 10px;
  }
}
</style>
